import React from 'react';
import { Card, Form, Row, Col, Input, Button, Table, Tabs, Radio } from 'antd';

import { FormInstance } from 'antd/lib/form';

import { history } from 'umi';



const { TabPane } = Tabs;

const tabListNoTitle = [
	{
	    key: '2',
	    tab: '资源管理',
	},
	{
	    key: '1',
	    tab: '订单管理',
	},
	{
	    key: '3',
	    tab: '收益管理',
	},
]

const resourcesColumns = [
	{
		title: '编号',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '52939'
		}
	},
	{
		title: '媒体名称',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '国际在线，焦点访谈'
		}
	},
	{
		title: '价格',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '¥200'
		}
	},
	{
		title: '频道类型',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '新闻资讯，it数码'
		}
	},
	{
		title: '地区',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '全国'
		}
	},
	{
		title: '收录类型',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '新闻源收录'
		}
	},
	{
		title: '审核',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return <Button size="small"  disabled>待审核</Button>
		}
	},
	{
		title: '操作',
		dataIndex: 'number',
		key: 'number',
		width: '120px',
		render: () => {
			return <Button size="small" type="primary">编辑</Button>
		}
	}
];

const zResourcesColumns = [
	{
		title: '编号',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '52939'
		}
	},
	{
		title: '媒体名称',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '国际在线，焦点访谈'
		}
	},
	{
		title: '价格',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '¥200'
		}
	},
	{
		title: '媒体平台',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '新闻资讯，it数码'
		}
	},
	{
		title: '行业',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return 'it'
		}
	},
	{
		title: '粉丝数',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '100w'
		}
	},
	{
		title: '平均阅读数',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return '100w'
		}
	},
	{
		title: '审核',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return <Button size="small"  disabled>待审核</Button>
		}
	},
	{
		title: '操作',
		dataIndex: 'number',
		key: 'number',
		render: () => {
			return <Button size="small" type="primary">编辑</Button>
		}
	},
];
 
let tableData = [];

for(let i=0;i<10;i++){
	tableData.push({
		key: i
	})
}

class Resources extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<>
				<Form
			      ref={this.formRef}
			    >
			    	<Row gutter={20}>
			    		<Col span={8}>
			    			<Form.Item
						        label="资源搜索"
						        name="username"
						    >
						    	<Input placeholder="请输编号或者媒体名称" />
						    </Form.Item>
			    		</Col>
			    		<Col span={8}>
			    			<Form.Item>
				    			<Button type="primary">查询一下</Button>
				    			<Button type="primary" style={{marginLeft: 10}} onClick={ () => { history.push('/mediaCenter/myResources/create') } }>添加资源</Button>
			    			</Form.Item>
			    		</Col>
			    	</Row>
			    	<Tabs defaultActiveKey="1" type="card">
			    		<TabPane tab="媒体资源" key="1">
			    			<div>
				    			<Form.Item>
				    				<Radio.Group buttonStyle="solid">
								      <Radio.Button value="a">全部</Radio.Button>
								      <Radio.Button value="b">已通过</Radio.Button>
								      <Radio.Button value="c">待审核</Radio.Button>
								      <Radio.Button value="d">未通过</Radio.Button>
								      <Radio.Button value="e">已暂停</Radio.Button>
								      <Radio.Button value="f">已下架</Radio.Button>
								    </Radio.Group>
				    			</Form.Item>
				    			<Table columns={resourcesColumns} dataSource={tableData} />
			    			</div>
			    		</TabPane>
			    		<TabPane tab="自媒体资源" key="2">
			    			<div>
			    				<Form.Item>
			    					<Radio.Group buttonStyle="solid">
								      <Radio.Button value="a">全部</Radio.Button>
								      <Radio.Button value="b">已通过</Radio.Button>
								      <Radio.Button value="c">待审核</Radio.Button>
								      <Radio.Button value="d">未通过</Radio.Button>
								      <Radio.Button value="e">已暂停</Radio.Button>
								      <Radio.Button value="f">已下架</Radio.Button>
								    </Radio.Group>
			    				</Form.Item>
			    				<Table columns={zResourcesColumns} dataSource={tableData} />
			    			</div>
			    		</TabPane>
			    	</Tabs>
			    </Form>
			</>
		)
	}
}




export default class ListComponet extends React.Component{
	state = {
		noTitleKey: '2'
	}
	onTabChange = (key) => {
		if(key === '3'){
			history.push('/mediaCenter/revenueManagement')
		}else if(key === '1'){
			history.push('/mediaCenter/orderProcessing')
		}
	}
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Card tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} onTabChange={key => {
		            this.onTabChange(key);
		          }} bordered={false} style={{ width: '100%' }}>
		          	<Resources />
				</Card>
			</div>
		)
	}
}